<script lang="ts" setup name="Login">
import { loginData, useLoginUserStore } from '@/index';
import type { FormInstance, FormRules } from 'element-plus';
const { login } = useLoginUserStore();
const loginFormRef = ref<FormInstance>();
const loginRules = reactive<FormRules<typeof loginData>>({
  username: [
    { required: true, trigger: 'blur', message: '账号不能为空' },
    { min: 5, max: 20, trigger: 'blur', message: '账号长度应为5到20位之间' }
  ],
  password: [
    { required: true, trigger: 'blur', message: '密码不能为空' },
    { min: 5, max: 20, trigger: 'blur', message: '密码长度应为5到20位之间' }
  ]
});
</script>
<template>
  <div class="login-container">
    <div class="login-form">
      <el-form ref="loginFormRef" :model="loginData" :rules="loginRules" size="large">
        <h1 class="title">上核检测中心</h1>
        <br />
        <el-form-item prop="username">
          <el-input v-model="loginData.username" name="username" clearable prefix-icon="User" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginData.password"
            name="username"
            clearable
            show-password
            prefix-icon="Lock"
          />
        </el-form-item>
        <el-form-item>
          <el-button class="login-button" size="large" type="success" @click="login(loginFormRef)">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<style lang="scss" scoped></style>
